<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/clear.css">
    <link rel="stylesheet" href="/static/css/seat.css">
    <script src="/static/js/jquery-1.12.2.js"></script>

    <title>选座页面</title>
    <link rel="icon" href="/static/images/title-lolg.png">

</head>

<body>
    <div th:replace="/common/head::#header"></div>
    <!-- 页面主体 -->
    <div class="container">
        <div class="nav-img"></div>
        <div class="main">
            <div class="seats-container">
                <div class="seatkinds">
                    <ul>
                        <li class="seatskind-model">
                            <img src="/static/images/seat.png" alt="">可选座位
                        </li>
                        <li class="seatskind-model">
                            <img src="/static/images/seatdisable.png" alt="">已售座位
                        </li>
                        <li class="seatskind-model">
                            <img src="/static/images/seat-readly.png" alt="">已选座位
                        </li>
                    </ul>
                </div>
                <div class="screen"></div>
                <div class="seats-body">
                    <div class="seatnum">
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                        </ul>
                    </div>
                    <div class="seats" id="seats-main" onselectstart="return false;">
                        <!--已购座位样式-->
                        <div>
                            <div class="seat" data-num="1-1"></div>

                            <div class="seat" data-num="1-2"></div>

                            <div class="seat" data-num="1-3"></div>

                            <div class="seat" data-num="1-4"></div>

                            <div class="seat" data-num="1-5"></div>

                            <div class="seat" data-num="1-6"></div>

                            <div class="seat" data-num="1-7"></div>

                            <div class="seat" data-num="1-8"></div>

                            <div class="seat" data-num="2-1"></div>

                            <div class="seat" data-num="2-2"></div>

                            <div class="seat" data-num="2-3"></div>

                            <div class="seat" data-num="2-4"></div>

                            <div class="seat" data-num="2-5"></div>

                            <div class="seat" data-num="2-6"></div>

                            <div class="seat" data-num="2-7"></div>

                            <div class="seat" data-num="2-8"></div>

                            <div class="seat" data-num="3-1"></div>

                            <div class="seat" data-num="3-2"></div>

                            <div class="seat" data-num="3-3"></div>

                            <div class="seat" data-num="3-4"></div>

                            <div class="seat" data-num="3-5"></div>

                            <div class="seat" data-num="3-6"></div>

                            <div class="seat" data-num="3-7"></div>

                            <div class="seat" data-num="3-8"></div>

                            <div class="seat" data-num="4-1"></div>

                            <div class="seat" data-num="4-2"></div>

                            <div class="seat" data-num="4-3"></div>

                            <div class="seat" data-num="4-4"></div>

                            <div class="seat" data-num="4-5"></div>

                            <div class="seat" data-num="4-6"></div>

                            <div class="seat" data-num="4-7"></div>

                            <div class="seat" data-num="4-8"></div>

                            <div class="seat" data-num="5-1"></div>

                            <div class="seat" data-num="5-2"></div>

                            <div class="seat" data-num="5-3"></div>

                            <div class="seat" data-num="5-4"></div>

                            <div class="seat" data-num="5-5"></div>

                            <div class="seat" data-num="5-6"></div>

                            <div class="seat" data-num="5-7"></div>

                            <div class="seat" data-num="5-8"></div>

                            <div class="seat" data-num="6-1"></div>

                            <div class="seat" data-num="6-2"></div>

                            <div class="seat" data-num="6-3"></div>

                            <div class="seat" data-num="6-4"></div>

                            <div class="seat" data-num="6-5"></div>

                            <div class="seat" data-num="6-6"></div>

                            <div class="seat" data-num="6-7"></div>

                            <div class="seat" data-num="6-8"></div>

                            <div class="seat" data-num="7-1"></div>

                            <div class="seat" data-num="7-2"></div>

                            <div class="seat" data-num="7-3"></div>

                            <div class="seat" data-num="7-4"></div>

                            <div class="seat" data-num="7-5"></div>

                            <div class="seat" data-num="7-6"></div>

                            <div class="seat" data-num="7-7"></div>

                            <div class="seat" data-num="7-8"></div>

                            <div class="seat" data-num="8-1"></div>

                            <div class="seat" data-num="8-2"></div>

                            <div class="seat" data-num="8-3"></div>

                            <div class="seat" data-num="8-4"></div>

                            <div class="seat" data-num="8-5"></div>

                            <div class="seat" data-num="8-6"></div>

                            <div class="seat" data-num="8-7"></div>

                            <div class="seat" data-num="8-8"></div>

                            <div class="seat" data-num="9-1"></div>

                            <div class="seat" data-num="9-2"></div>

                            <div class="seat" data-num="9-3"></div>

                            <div class="seat" data-num="9-4"></div>

                            <div class="seat" data-num="9-5"></div>

                            <div class="seat" data-num="9-6"></div>

                            <div class="seat" data-num="9-7"></div>

                            <div class="seat" data-num="9-8"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="data">
                <div class="movie-data">
                    <img  th:src="${movieVo.previewUrl}" alt="" id="movieimg">
                    <div class="text">
                        <p id="moviename" th:text="${movieVo.name}">姜子牙</p>
                        <p>
                            类型: <span id="moviekind" th:each="type:${movieVo.types}" th:text="${type}"></span>
                        </p>
                        <p>时长: <span class="time" th:text="${movieVo.duration}">123分钟</span></p>
                    </div>
                </div>
                <div class="cinema-data">
                    <p>影院: <span id="cinemaname" th:text="${movieTheatreShow.movieTheatreName}">承光国际影城</span></p>
                    <p>影厅: <span th:text="${movieTheatreShow.videoHall}">5号激光影厅</span></p>
                    <p>版本: <span th:text="${movieTheatreShow.languageVersion}">中文3D</span></p>
                    <p>场次: <span class="active" th:text="${movieTheatreShow.getSessionTime()}">今天下午 13:15</span></p>
                    <p>票价: ¥<span id="price">[[${movieTheatreShow.price}]]</span>/张</p>
                </div>
                <div class="price">
                    <p>座位</p>
                    <div id="seatmini">
                        <p id="tips">点击左侧座位选择</p>
                    </div>
                </div>
                <div class="countmoney">
                    <span>总价:</span>
                    <span>¥
                        <span id="pricemonry">0</span>
                    </span>
                </div>
                <div class="user-data">
                    <!--<p>手机号：<span>189****4684</span></p>-->
                    <!--<a href="#" id="givemoney">确认选座</a>-->
                    <p th:if="${msg!=null}" th:text="${msg}" style="font-size: 15px;color: red"></p>
                    <form action="/movie/order/submitOrder" method="post">
                        <input type="hidden" name="seat">
                        <input type="hidden" name="price">
                        <input type="hidden" name="token" th:value="${token}">
                        <input type="hidden" name="endDate" th:value="${movieTheatreShow.getEndDate()}">
                        <input type="hidden" name="movieTheatreShowId" th:value="${movieTheatreShow.id+''}">
                        <input type="hidden" name="movieId" th:value="${movieVo.id+''}">
                        <input type="submit" style="width: 250px;height: 50px;background-color: #dedede;color: white;border-radius: 40px;margin-left: 10px;margin-top: 20px" id="givemoney" value="确认选座" disabled ></input>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面底部 -->
    <div th:replace="common/bottom::#bottom"></div>

    <!--<script src="/static/js/ajax.js"></script>-->
    <!--<script src="/static/js/mock-min.js"></script>-->
    <!--<script src="/static/js/server.js"></script>-->
</body>

<script>
    let seats = document.getElementById('seats-main');
    // 添加点击事件
    seats.addEventListener('click', (e) => {
        let btn = e.target;
        let arr = [btn.className];
        if (arr[0] == 'seat') {
            btn.classList.add('ableseat');
            let id = btn.getAttribute('data-num').split("-");
            addbox(id);
        } else {
            if (arr.indexOf('ableseat')) {
                let id = btn.getAttribute('data-num');
                subbox(id);
                btn.classList.remove('ableseat');
            }
        }

        //计算价格
        var price = $("#price").text();
        var length = $("#seatmini").children("div").length;
        $("#pricemonry").html(price*length);

        //是否显示确认选座
        if (length>0){
            $("#givemoney").css("background-color","red");
            $("#givemoney").attr("disabled",false);
        }else {
            $("#givemoney").css("background-color","#dedede");
            $("#givemoney").attr("disabled",true);
        }

        //更新seat数据
        var seat="";
        $(".seat-num").each(function () {
            seat+=$(this).attr("id")+","
        })
        var substring = seat.substring(0,seat.length-1);
        $("input[name='seat']").val(substring)

        //更新价格
        $("input[name='price']").val($("#pricemonry").html())

    })

    // 侧边栏增加购买的座位号
    function addbox(id) {
        let box = document.getElementById('seatmini');
        let div = document.createElement('div');
        // 侧边栏提示信息隐藏
        let p = document.getElementById('tips');
        p.setAttribute('class', 'none');
        div.setAttribute('class', 'seat-num');
        div.setAttribute('id', `${id.join('-')}`);
        div.innerHTML = `
    第${id[0]}行第${id[1]}号座
    `;
        box.appendChild(div)
    }

    // 取消座位后去除侧边栏座位号
    function subbox(id) {
        let box = document.getElementById('seatmini');
        let div = document.getElementById(`${id}`);
        box.removeChild(div);
    }



</script>
<script  th:inline="javascript">
    //渲染座位
    // 获得座位数据
    var info={
        data:[
            [# th:each="seat:${buySeat}"]
                 [[${seat}]],
        [/]
        ]
    }

    //开始渲染
    for (let i = 0; i < info.data.length; i++) {
        $("div[data-num="+info.data[i]+"]").addClass("disableseat");
    }
</script>
</html>